<style type="text/css">
    .loader-wrapper {
        position: relative
    }

    .loader-wrapper .loader-container {
        overflow: hidden
    }

    .loader-wrapper .loader-container.loader-blur {
        opacity: .7;
        -webkit-filter: blur(.5px);
        filter: blur(.5px);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    .loader-wrapper .loader {
        position: absolute
    }

    .loader {
        display: none
    }

    .loader.loading {
        display: block;
        height: 100%;
        max-height: 320px;
        width: 100%;
        z-index: 4
    }

    .loader span {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -10px;
        -webkit-animation: 3s infinite linear;
        animation: 3s infinite linear;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-perspective: 1000;
        perspective: 1000;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    .loader span:first-child {
        background-color: #f16d60;
        -webkit-animation: kiri 1.2s infinite linear;
        animation: kiri 1.2s infinite linear
    }

    .loader span:nth-child(2) {
        background-color: #f9da16;
        z-index: 100
    }

    .loader span:nth-child(3) {
        background-color: #00a4f5;
        -webkit-animation: kanan 1.2s infinite linear;
        animation: kanan 1.2s infinite linear
    }

    @-webkit-keyframes kanan {
        0% {
            -webkit-transform: translateX(20px)
        }

        50% {
            -webkit-transform: translateX(-20px)
        }

        to {
            -webkit-transform: translateX(20px);
            z-index: 200
        }
    }

    @keyframes kanan {
        0% {
            -webkit-transform: translateX(20px)
        }

        50% {
            -webkit-transform: translateX(-20px)
        }

        to {
            -webkit-transform: translateX(20px);
            z-index: 200
        }
    }

    @-webkit-keyframes kiri {
        0% {
            -webkit-transform: translateX(-20px);
            z-index: 200
        }

        50% {
            -webkit-transform: translateX(20px)
        }

        to {
            -webkit-transform: translateX(-20px)
        }
    }

    @keyframes kiri {
        0% {
            -webkit-transform: translateX(-20px);
            z-index: 200
        }

        50% {
            -webkit-transform: translateX(20px)
        }

        to {
            -webkit-transform: translateX(-20px)
        }
    }
</style>
<div class="loader-wrapper">
    <div class="loader loading"><span></span><span></span><span></span></div>
   
</div>